import React,{useState} from 'react';
import { useNavigate } from 'react-router-dom'
import {connect} from "react-redux";
import { Button, Checkbox, Form, Input, message,Spin  } from 'antd';
import {nanoid} from 'nanoid'
import {ResponseType} from '@/api/indexType'
import {setUserInfo,setToken} from '@/redux/modules/global/action'

import './index.less'
import request from "@/api";

function Login(props:any) {
    let {setUserInfo,setToken} = props
    const [loading, setLoading] = useState<boolean>(false);
    const navigate = useNavigate()
    const [form] = Form.useForm();
    type FieldType = {
        username?: string;
        password?: string;
        remember?: string;
    };

    const onFinish = (values:FieldType) => {
        console.log('onFinish----',values)
        request.post({
            url:'/loginIn',
            data:{
                usename:values.username,
                password:values.password,
            },
        }).then((res:ResponseType)=>{
            setToken(res.data)
            message.success("登录成功！");
            setTimeout(()=>{
                setLoading(false)
                navigate('/home');
            },500)
        })
    };

    const onReset = () => {
        form.resetFields();
    };
    return (
        <div className="loginPage">
            <div className="loginBg">
                <div className="loginCon">
                    <Spin spinning={loading} delay={500}>
                        <div className="logoArea">NEWAPP</div>
                        <div className="preLoginForm">
                            <Form
                                form={form}
                                name="basic"
                                layout='vertical'
                                labelCol={{ span: 22 }}
                                wrapperCol={{ span: 22 }}
                                style={{ maxWidth: 400 }}
                                initialValues={{ remember: true }}
                                onFinish={onFinish}
                                autoComplete="off"
                            >
                                <Form.Item<FieldType>
                                    label="用户名："
                                    name="username"
                                    rules={[{ required: true, message: 'Please input your username!' }]}
                                >
                                    <Input />
                                </Form.Item>

                                <Form.Item<FieldType>
                                    label="密码："
                                    name="password"
                                    rules={[{ required: true, message: 'Please input your password!' }]}
                                >
                                    <Input.Password />
                                </Form.Item>

                                <div className="preBtn mb10">
                                    <span className="zcBtn">没有账号？先注册</span>
                                    <div className="rememberBtn">
                                        <Form.Item<FieldType>
                                            name="remember"
                                            valuePropName="checked"
                                        >
                                            <Checkbox className="zcBtn">Remember me</Checkbox>
                                        </Form.Item>
                                    </div>
                                </div>


                                <div className="preBtn">
                                    <Button htmlType="button" onClick={onReset}>
                                        取消
                                    </Button>
                                    <Button type="primary" htmlType="submit">
                                        提交
                                    </Button>
                                </div>
                            </Form>
                        </div>

                    </Spin>
                </div>
            </div>
        </div>
    );
}
const mapDispatchToProps = {setUserInfo,setToken}
export default connect(null,mapDispatchToProps)(Login);
